vue3中使用router路由实现跳转传参的方法 |
您所在的位置:网站首页 › vue 路由传参 有缓存 › vue3中使用router路由实现跳转传参的方法 |
vue3中使用router路由实现跳转传参的方法
大家好,今天和大家分享一下vue3中如何进行跳转并进行传参。 前言 vue3取消了vue2部分api,所以路由跳转和传值的方式会有所不同。我们今天主要讲router.push(location, onComplete?, onAbort?)vue3中新增API:useRouter和useRoute 一、路由跳转 1.首先在需要跳转的页面引入API—useRouter import { useRouter } from 'vue-router'2.在跳转页面定义router变量 //先在setup中定义 const router = useRouter()3.用router.push跳转页面 // 字符串 router.push('home') // 对象 router.push({ path: 'home' }) // 命名的路由 router.push({ name: 'user', params: { userId: '123' }}) // 带查询参数,变成 /register?userId=123 router.push({ path: 'register', query: { userId: '123' }})4.如果有参数的话,在接收页面引入API–useRoute import { useRoute } from 'vue-router'5.在接收页面定义变量route,获取传过来的变量 //首先在setup中定义 const route = useRoute() //query let userId=route.query.userId; //params let userId=route.params.userId;二、页面传参需要注意 1.如果提供了 path,params 会被忽略,但query 没有这种情况,此时需要提供路由的 name 或手写完整的带有参数的 path const userId = '123' router.push({ name: 'user', params: { userId }}) router.push({ path: `/user/${userId}` }) // 这里的 params 不生效 router.push({ path: '/user', params: { userId }})2.上述规则同样适用于 router-link 组件的 to 属性3.如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息) 总结 关于vue3中使用router路由实现跳转传参的文章就介绍至此,更多相关vue3路由跳转传参内容请搜索编程宝库以前的文章,希望以后支持编程宝库! 下一节:vue 遮罩和ref的使用setup版和非setup版JS 编程技术1、创建conform.vue,其内容如下: |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |